<template>
  <div class="my-input" tabindex="-1" :class="{'active-border': drapdownshow}"
       v-clickoutside="handleClickOutSide">
    <div class="input-box">
      <div class="cover-box" @click="coverIsShowFun" v-show="coverIsShow">
        {{inputBoxValue}}
      </div>
      <el-input
        @focus="elInputFocus"
        v-model="inputValue"
        ref="elInput"
        :placeholder="placeholder"></el-input>
      <i slot="suffix" class="el-input__icon el-icon-close clear-icon" @click.stop="clearInputValue"></i>
    </div>
    <!--<i class="el-icon-circle-close" @click.stop="clearCheckedValue" v-if="checkedValue.length > 0"></i>-->
    <transition enter-class="el-zoom-in-top-enter" enter-active-class="el-zoom-in-top-enter-active"
                leave-class="el-zoom-in-top-leave" leave-active-class="el-zoom-in-top-leave-active"
                leave-to-class="el-zoom-in-top-leave-to">
      <div v-show="drapdownshow" class="drapdown">
        <el-scrollbar style="height: calc(100% - 40px)">
          <div class="tab">
            <ul style="margin: 0;padding: 0">
              <li
                class="tab-item"
                v-for="(item,index) in options"
                :key="item"
                @click.stop="handleCheckedValuesChange(item)">{{item}}
              </li>
            </ul>
            <!--<el-checkbox-group v-model="checkedValue" @change="handleCheckedValuesChange">-->
            <!--<el-checkbox style="display: block;margin: 0 20px;padding: 0;" v-for="item in checkData" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>-->
            <!--</el-checkbox-group>-->
          </div>
        </el-scrollbar>
        <div @click="createNewGroup" class="createBox">
          <a href="javascript:;">Create a new group</a>
        </div>
        <!--<div class="selectAll">-->
        <!--<el-checkbox style="display: block;font-weight:600;margin: 0 20px;padding: 0;" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('select.selectAll')}}</el-checkbox>-->
        <!--</div>-->
      </div>
    </transition>
    <!--</el-collapse-transition>-->
  </div>
</template>

<script>
  import clickoutside from './clickoutside';
  export default {
    name: 'myInput',
    props: {
      options: Array,
      value: String,
      placeholder: {
        type: String,
        default: 'Please Input'
      }
    },
    directives: {
      'clickoutside': clickoutside
    },
    data() {
      return {
        drapdownshow: false,
        inputBoxValue: '',
        inputValue: '',
        selectOptions: [],
        coverIsShow: false
      };
    },
    computed: {
    },
    watch: {
      inputBoxValue(newVal){
        if (newVal !== '') {
          this.coverIsShow = true;
        } else {
          this.coverIsShow = false;
        }
      },
      options(n) {
        if (n.length !== 0) {
          this.drapdownshow = true
        }
      },

      value(n) {
        this.inputBoxValue = n;
      },
      filterValue(n) {
        if (n == '') {
          this.checkData = this.options
        } else {
          this.checkData = this.options.filter(v => {
            return v.value.toLowerCase().includes(n.toLowerCase())
          })
        }
      },
//      inputValue(newValue, oldValue){
//        this.$emit('input', newValue);
//        if(newValue!==''){
//          this.$emit('change', newValue)
//        }else {
//          this.drapdownshow = false
//        }
//      }
    },
    created(){
      this.inputBoxValue = this.value;
      if (this.options.length !== 0) {
        this.drapdownshow = true
      }
    },
    methods: {
      keyUpFun(e){
        console.log(e);
//        this.$emit('input', e.key);
//        this.$emit('change', e.key)
      },
      createNewGroup(){
        this.$emit('createNewGroup');
        this.drapdownshow = false;
      },
      clearInputValue(){
        this.inputValue = '';
        this.inputBoxValue = '';
        this.$emit('input', '');
        this.$emit('getData', '')
      },
      elInputFocus(){
//        if (this.inputValue !== '') {
//          this.drapdownshow = true;
//        }
        this.drapdownshow = true;
      },
      coverIsShowFun(){
        this.coverIsShow = false;
        this.$refs.elInput.focus();
      },
      checkFirst(){
        //filterBox摁enter触发事件，el-input不支持@keyup.enter
        this.checkedValue = this.checkData[0];
        this.drapdownshow = false;
        this.filterValue = '';
      },
      handleClickOutSide() {
        this.drapdownshow = false;
        if (this.inputBoxValue !== '') {
          this.coverIsShow = true;
        } else {
          this.coverIsShow = false;
        }
//
      },
//
      handleCheckedValuesChange(n) {
//
        this.inputBoxValue = n;
//        this.inputValue = n;
        this.drapdownshow = false;
        this.$emit('input', n);
        this.$emit('getData', n)
      },
//
      show() {
        this.drapdownshow = true;
      },
    },
    mounted() {
//      this.checkCheckedValuesStatus()
    }
  };
</script>

<style lang="scss" scoped>
  .my-input {
    .input-box {
      position: relative;
      .cover-box {
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 100%;
        z-index: 100;
        text-align: left;
        line-height: 40px;
        padding-left: 15px;
        cursor: text;
        background: white;
        border: 1px solid #d8dce5;
        border-radius: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .clear-icon {
        position: absolute;
        display: none;
        cursor: default;
        top: 0;
        z-index: 999999;
        right: 4px;
        color: #b4bccc;
      }
      &:hover .clear-icon {
        display: block;
      }
    }
    cursor: pointer;
    user-select: none;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    /*width: 240px;*/
    /*height: 40px;*/
    width: 100%;
    /*border: 1px solid #bfcbd9;*/
    background-color: #fff;
    border-radius: 4px;
    outline: none;
    color: #5a5e66;
    .select {
      position: relative;
      padding-left: 20px;
      label {
        display: inline-block;
        cursor: pointer;
        font-size: 14px;
        font-family: sans-serif;
        font-weight: 530;
        line-height: 40px;
        height: 40px;
        width: calc(100% - 35px);
        color: #bfcbd9;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      i {
        position: absolute;
        display: none;
        right: 4px;
      }
      .label-span {
        line-height: 40px;
        color: #999;
      }
      .el-icon-arrow-down, .el-icon-circle-close {
        position: absolute;
        color: #999;
        line-height: 40px;
        right: 20px;
        transition: transform 0.3s;
        z-index: 999;
      }
      .icon-180 {
        transform: rotate(-180deg);
        transition: transform 0.3s
      }
      &:hover .el-input__icon {
        display: inline-block;
      }
    }

    .drapdown {
      position: absolute;
      /*width: calc(100% + 140px);*/
      /*width: 240px;*/
      /*right: calc(100% - 240px);*/
      top: 50px;
      background-color: #fff;
      /*width: 100%;*/
      height: 222px;
      border: 1px solid #d1dbe5;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
      border-radius: 4px;
      z-index: 2003 !important;
      &:after {
        position: absolute;
        top: -4px;
        left: calc(20% - 10px);
        content: '';
        display: inline-block;
        background: #fff;
        width: 6px;
        height: 6px;
        border-top: 1px solid #d1dbe5;
        border-right: 1px solid #d1dbe5;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
      }
      .tab {
        position: relative;
        width: 100%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #999;
        ul {
          .tab-item {
            display: block;
            padding: 0 20px;
            width: 100%;
            color: #5a5e66;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /*border-bottom: 1px solid #bfcbd9;*/
            &:hover {
              background: #f5f7fa;
            }
          }
          .item-selected {
            color: #409EFF;
            font-weight: 700
          }
          .item-selected:after {
            position: absolute;
            right: 20px;
            font-weight: 700;
            -webkit-font-smoothing: antialiased;
            font-family: element-icons;
            content: "\E611";
            font-size: 12px;
            color: #409EFF;
          }
        }
      }
      .filterBox, .selectAll {
        /*background: red;*/
        height: 40px;
      }
      .selectAll {
        border-top: 1px solid #d1dbe5;
      }
      .filterBox {
        border-bottom: 1px solid #d1dbe5;
        .el-input {
          input {
            /*margin: 0 20px;*/
            /*line-height: 36px;*/
            /*font-size: 16px;*/
            /*color: #666;*/
            /*border: 0;*/
            /*max-width: calc(100% - 40px);*/
            /*outline: none;*/
          }
        }
      }
      .el-scrollbar {
        /*border-top: 1px solid #bfcbd9;*/
      }
      .createBox{
        text-align: center;
        a{
          line-height: 40px;
          color: #78a5f1;
          cursor: pointer;
        }
      }
    }
  }

  .active-border {
    border-color: #409eff;
  }

  .slide-fade-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>

<style lang="scss">
  .my-input {
    .el-scrollbar__wrap {
      overflow-x: hidden !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #66cc99;
      border-color: #66cc99;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #66cc99;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #999;
    }
    .el-checkbox__label {
      color: #999;
    }
  }
</style>
